<template>
	<view>
		<view class="self">
			<view class="userInfo flex-between">
				<view class="profile">
					<image :src="userInfo.profile"></image>
				</view>
				<view class="userName">
					<view class="userName_line1 flex-start">
						<view>{{userInfo.nick_name}} </view>
						<image style="width: 40rpx;padding:0 4rpx 0 10rpx;" src="/static/svg/ShieldGreen.svg"
							mode="widthFix"></image>
						<view style="font-size: 24rpx;" @click="toTicketAgent">已实名</view>
					</view>
					<view class="userName_line2">{{userInfo.business_mobile}} {{userInfo.authority_name}}账号</view>
				</view>
				<uni-icons type="bars" size="18" @click="goto('/pages/information/information')"></uni-icons>
			</view>
			<view class="siteList">
				<view class="title flex-between">
					<view>我的钓场</view>
					<view class="flex-between add" @click="inputDialogToggle">
						<image style="width: 30rpx;height: 30rpx;" src="/static/svg/add.svg" alt=""></image>
						<view class="addText">新增钓场</view>
					</view>
				</view>
				<uni-collapse :accordion="true" @change="changeAccord">
					<uni-collapse-item class="collapse-item" v-for="item in fishsiteList" :key="item.id"
						:title="item.fish_place_name" :show-animation="true"
						:thumb="item.pictures.fish_place_cover_path?item.pictures.fish_place_cover_path[0].url:''">
						<view class="setBox flex-start">
							<view class="setItem" @click="goto('/pages/fashingSite/siteAdd/index',item)">
								<image src="/static/svg/set.svg" alt=""></image>
								<view class="line" style="background:#A5D63F;"></view>
								<view class="setItemName">钓场设置</view>
							</view>
							<view class="setItem" @click="goto('/pages/fashingSite/siteOrder/index',item)">
								<image src="/static/svg/order.svg" alt=""></image>
								<view class="line" style="background:#D43030;"></view>
								<view class="setItemName">售票记录</view>
							</view>
							<view class="setItem" @click="toCouponManagement">
								<image src="/static/svg/coupon.svg" alt=""></image>
								<view class="line" style="background:#2A82E4"></view>
								<view class="setItemName">优惠券管理</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="新增钓场" :value="add_fash_place_name"
					placeholder="请输入钓场名称" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	// import { state } from '@/store/index.uts'
	import {
		get_fish_place,
		add_fish_place
	} from '@/utils/api.js'

	export default {
		data() {
			return {
				title: 'Hello',
				userInfo: {
					authority: 0,
					authority_name: '',
					business_id: '',
					business_mobile: "13291282956",
					id: 2,
					nick_name: "用户-2956",
					profile: 'https://img.js.design/assets/avatarImg/Small64dc7cecd5a27071584095111701915503632.png',
					token: ''
				},
				fishsiteList: [],
				add_fash_place_name: ""
			}
		},
		onLoad() {
			console.log("onLoad")
			// console.log(state.userInfo)
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.get_fish_place_list()
		},
		methods: {
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '正在新增钓场'
				})

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
					add_fish_place({
						fish_place_name: val
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								duration: 500
							});
							this.get_fish_place_list()
						} else {
							uni.showToast({
								title: res.msg,
								duration: 500
							});
						}
					})
				}, 500)
			},
			goto(url, item) {
				if (item) {
					uni.navigateTo({
						url: url + "?id=" + item.id
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},

			changeAccord(arr) {
				console.log(arr)
			},
			get_fish_place_list() {
				get_fish_place().then(res => {
					if (res.code == 200) {
						this.fishsiteList = res.data
					}
				})
			},
			toFishAccount() {
				uni.navigateTo({
					url: '/pages/fashingSite/siteAccount/index'
				})
			},
			toTicketAgent() {
				uni.navigateTo({
					url: '/pages/fashingSite/ticketAgent/index'
				})

			},
			//去优惠券管理
			toCouponManagement() {
				uni.navigateTo({
					url: '/pages/fashingSite/couponManagement/index'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		background-color: #F3F4F6;
	}

	.self {
		
		.userInfo {
			padding: 20rpx 40rpx;
			align-items: center;
			background: #fff;
			margin-bottom: 30rpx;

			.profile {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.userName {
				padding: 20rpx;
				flex: 1;

				.userName_line1 {
					line-height: 52rpx;
					font-size: 32rpx;
					align-items: center;
				}

				.userName_line2 {
					line-height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.8);
				}
			}
		}

		.siteList {
			background: #fff;

			.title {
				padding: 20rpx 30rpx;
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 700;

				.add {
					color: #D43030;
					font-weight: 400;
					align-items: center;

					.addText {
						font-size: 28rpx;
						margin-left: 4rpx;
					}
				}

			}

			.setBox {
				flex-wrap: wrap;
				background-color: #F3F4F6;
				padding: 40rpx 0 0;
				box-shadow: inset 0px 2px 4px #999999cf;

				.setItem {
					width: 33%;
					margin-bottom: 40rpx;
					text-align: center;

					uni-image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 auto;
					}

					.line {
						width: 60rpx;
						height: 4rpx;
						margin: 4rpx auto 12rpx;
						filter: blur(5rpx);
					}

					.setItemName {
						text-align: center;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	:deep(.uni-collapse-item__title-img) {
		height: 92rpx;
		width: 92rpx;
	}

	:deep(.uni-collapse-item__title-box) {
		margin: 16rpx 0;
	}
	:deep(.uni-popup-dialog){
		.uni-dialog-title{
			.uni-popup__info{
				padding-top: 20rpx;
				span{
					font-size: 28rpx !important;
					color: #000000 !important;
				}
			}
		}
		.uni-dialog-content{
			padding: 30rpx;
		}
		.uni-dialog-button-group{
			justify-content: space-around;
			padding-bottom: 30rpx;
	
			.uni-dialog-button{
				.uni-dialog-button-text{
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					text-align: center;
					background: #E5E5E5;
					color: #333;
				}
				.uni-button-color{
					color: #fff;
					background: #D43030;
				}
			}
		}
	}
</style>